<template>
    <div id="app">
        <el-container v-if="$route.path!='/'&&$route.path!='/register'" class="base-full">
            <el-header style="height: 80px;">
                <div-header></div-header>
            </el-header>
            <el-container>
                <el-aside>
                    <show-menu></show-menu>
                </el-aside>
                <el-main>
                    <transition>
                        <router-view/>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
        <router-view v-else />
    </div>
</template>

<script>
import DivHeader from "@/views/index/divHeader";
import ShowMenu from "@/views/index/showMenu";

export default {
    name: 'App',
    components: {DivHeader, ShowMenu},
    data() {
        return {
            message: ''
        }
    },
    mounted() {
        this.setDictionaryType();
        this.setChinaRegion();
        this.setIndustryType();
        this.setInstitutionTree();
    },
    watch: {
        $route(from, to) {
            if (this.$route.path != "/" && this.$route.path != "/register") {
                if (!this.$root.getStorage("authorization")) {
                    this.$router.replace("/");
                }
            } else {
                this.$root.removeStorage('authorization');
                this.$root.removeStorage('userData');
                this.$root.removeStorage('menuList');
                this.$root.removeStorage('topMenu');
            }
        },
    },
    methods: {
        setDictionaryType() {
            this.$axios.get("/CHILD_SYSTEM/selected/getDictionaryType").then(res => {
                this.$root.setStorage('dicList', res.data.list);
                this.$root.setStorage('dicMap', res.data.map);
            })
        },
        setChinaRegion() {
            this.$axios.get("/CHILD_SYSTEM/selected/getWorldRegion").then(res => {
                this.$root.setStorage('worldRegionList', res.data.list);
                this.$root.setStorage('worldRegionMap', res.data.map);
            })
        },
        setIndustryType() {
            this.$axios.get("/CHILD_SYSTEM/selected/getIndustryType").then(res => {
                this.$root.setStorage('industryTypeList', res.data.list);
                this.$root.setStorage('industryTypeMap', res.data.map);
            })
        },
        setInstitutionTree() {
            this.$axios.get("/CHILD_SYSTEM/selected/getInstitutionTree").then(res => {
                this.$root.setStorage('institutionTree', res.data);
            })
        },
    }
}
</script>

<style lang="scss">
#app {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    min-width: 1280px;
    overflow: hidden;
}

.base-full {
    padding: 0;
    margin: 0;
    
    .el-header {
        margin: 0;
        padding: 0;
        width: 100%;

        .base_logo {
            float: left;
            font-size: 32px;
            margin: 10px;
            height: 60px;
            line-height: 60px;
            width: 300px;
            cursor: pointer;
            text-align: center;
        }

        .top_menu{
            float: left;
            margin-top: 25px;
            width: calc(100vw - 540px);
            overflow-x: auto;

            .menu_image {
                float: left;
                margin-right: 10px;

                img {
                    height: 30px;
                }
            }
        }

        .show_user {
            margin: 10px;
            height: 60px;
            line-height: 60px;
            float: right;
            cursor: pointer;

            .el-dropdown{
                margin: 0;
                padding: 0;
                height: 60px;

                div {
                    float: left;

                    .el-avatar {
                        background: none;
                        border: 1px white solid;
                        margin: 10px 5px;
                    }

                    .show_user_name{
                        height: 50px;
                        line-height: 50px;
                        color: #eaeaea;
                        font-size: 16px;
                        float: right;
                        margin: 5px;
                    }
                }
            }
        }

        .div-top-menu {
            margin: 10px;
            height: 60px;
            line-height: 60px;
            float: left;
            cursor: pointer;
            
            div {
                float: left;
                margin: 10px 0 10px 5px;
                
                i {
                    font-size: 30px;
                    padding: 5px;
                    border: #444444 1px solid;
                }
            }
            
            div:hover {
                i {
                    border: red 1px solid;
                }
            }
            
            div.is-active {
                i {
                    border: red 1px solid;
                }
            }
            
        }

    }
    
    .el-aside {
        float: left;
        padding: 0;
        margin: 0;
        width: fit-content !important;
        height: calc(100vh - 80px);
		overflow-x: hidden;
		overflow-y: auto;
    }
    
    .el-main {
        float: right;
        padding: 0;
        margin: 0;
        height: calc(100vh - 80px);
        overflow: hidden;
        
        .el-card {
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            margin: 10px;
            
            .el-card__body {
                margin: 0;
                padding: 0;
            }
        }
    }
    
    .base_menu_right {
        margin: 10px;
        text-align: right;
        cursor: pointer;
    }
    
    .base_menu_left {
        margin: 10px 20px;
        text-align: left;
        cursor: pointer;
    }
    
    .el-icon-s-unfold {
        font-size: 20px;
    }
    
    .el-icon-s-fold {
        font-size: 20px;
    }
}

.el-dropdown-menu {
    width: 160px;

    .el-dropdown-menu__item {
        list-style: none;
        text-align: center;
        font-size: 16px;

        i{
            font-size: 15px;
        }
    }
}

</style>